<template>
  <div id="container">
    <div id="cesiumContainer">

    </div>
  </div>
</template>

<script>
let viewer = null;
import * as Cesium from "cesium/Cesium";
import Util_Projection from "../utils/Util_Projection";
import axios from "axios";
export default {
  data(){
    return{
      colorIndex:0
    }
  },
  /*
    页面初始化开始执行
  */
  created(){

  },
  /*
    界面初始化完毕执行
   */
  mounted(){
    this.initScene();
    this.drawPoint();
  },
  methods:{
    randomColor() {
      this.colorIndex++;
      let list=[Cesium.Color.LAWNGREEN,Cesium.Color.AQUA,Cesium.Color.LAWNGREEN,Cesium.Color.CORAL,Cesium.Color.AQUAMARINE,Cesium.Color.LIGHTCORAL,Cesium.Color.MEDIUMTURQUOISE]
      return list[this.colorIndex];
    },
    drawPoint(){
      this.colorDict={};
      let cx = 50;
      let cy=20;
      let radius = 10;
      let maxX = -10000;
      let maxY = -10000;
      let maxZ = -10000;
      let minX = 10000;
      let minY = 10000;
      let minZ = 10000;
      axios.get("static/xy/output.csv").then(res => {
        let list = res.data.split("\n");
        console.log(list);
        let xscale = 10;
        let pointPrimitives = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
        let index=0;
        list.forEach(item =>
        {
          let arr = item.split(',');
          maxX=Math.max(parseFloat(arr[0]),maxX);
          maxY=Math.max(parseFloat(arr[1]),maxY);
          maxZ=Math.max(parseFloat(arr[2]),maxZ);

          minX=Math.min(parseFloat(arr[0]),minX);
          minY=Math.max(parseFloat(arr[1]),minY);
          minZ=Math.max(parseFloat(arr[2]),minZ);

          index++;
          // if (index%10==0){


          let pos = Util_Projection.webMercator2LngLat(parseFloat(arr[0])*xscale,parseFloat(arr[2])*xscale);
          let lng = pos[0];
          let lat = pos[1];
          var position = Cesium.Cartesian3.fromDegrees(lng, lat, parseFloat(arr[1])*xscale);// 这里的 50 是高度

          let colorIndex=arr[3];
          //check
          let dx = cx-parseFloat(arr[0]);
          let dy = cy-parseFloat(arr[1]);
          console.log(minX,maxX,minY,maxY,minZ,maxZ)
          if (Math.sqrt(dx*dx+dy*dy)<radius){
            colorIndex=-1;
          }

          if (!this.colorDict[colorIndex])
            this.colorDict[colorIndex]=this.randomColor();

          pointPrimitives.add({
            pixelSize: 1,
            color: this.colorDict[colorIndex],
            outlineColor: this.colorDict[colorIndex],
            outlineWidth: 0,
            position: position
          });
          // }
        })


        viewer.zoomTo(pointPrimitives);//缩放至模型

      })

    },
    initScene(){
      let options={
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ //调用影响中文服务
          url: "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
            "904d887e70ad2473628d011003ce14ca", //url地址
          layer: "tdtBasicLayer", //WMTS请求的层名称
          style: "default", //WMTS请求的样式名称
          format: "tiles", //MIME类型，用于从服务器检索图像
          tileMatrixSetID: "GoogleMapsCompatible", //	用于WMTS请求的TileMatrixSet的标识符
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图8个服务器
          minimumLevel: 0, //最小层级
          maximumLevel: 18, //最大层级
        }),
      }
      viewer = new Cesium.Viewer('cesiumContainer',options);
    }
  }
}
</script>

<style>

#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

</style>
